iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
Mobile Development

Android開發系列 第 23

[Day23] RecyclerView_1

  • 分享至 

  • xImage
  •  

什麼是幸福人生?就是自我實現心中的美好。寫鐵人文好有實現感耶~
大家好今天要來示範recyclerview,recyclerview簡單來說就是ListView的改良版,大家如果不知道ListView是什麼的話可以去看看我前幾篇的文章,比起ListView來說RecyclerView比較複雜,廢話不多說那我就開始示範吧!

首先我們先加入dependencies,在裡面除了recyclerview我還會加入cardview來搭配。

    implementation 'androidx.recyclerview:recyclerview:1.1.0'
    implementation 'androidx.cardview:cardview:1.0.0'

然後建立布局

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/mRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

cardview.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp">

        <ImageView
            android:id="@+id/continentimage"
            android:layout_width="100dp"
            android:layout_height="100dp" />

        <TextView
            android:id="@+id/continent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="35sp" />

    </LinearLayout>

</androidx.cardview.widget.CardView>

和前幾天ListView一樣的布局

然後建立Adapter

ExampleAdapter

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class ExampleAdapter extends RecyclerView.Adapter<ExampleAdapter.ExampleViewHolder> {

    private List<ExampleData> exampleDataList;

    public ExampleAdapter(List<ExampleData> exampleData) {
        this.exampleDataList = exampleData;
    }

    public static class ExampleViewHolder extends RecyclerView.ViewHolder {
        public ImageView imageView;
        public TextView textView;

        public ExampleViewHolder(@NonNull View itemView) {
            super(itemView);

            imageView = itemView.findViewById(R.id.continentimage);
            textView = itemView.findViewById(R.id.continent);
        }
    }


    @NonNull
    @Override
    public ExampleViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.cardview,parent,false);

        return new ExampleViewHolder(v);
    }

    @Override
    public void onBindViewHolder(@NonNull ExampleViewHolder holder, final int position) {
        ExampleData exampleData = exampleDataList.get(position);
        holder.imageView.setImageResource(exampleData.getImage());
        holder.textView.setText(exampleData.getContinent());
    }

    @Override
    public int getItemCount() {
        return exampleDataList.size();
    }

}

ExampleData

public class ExampleData {
    private int  image;
    private String continent;
    
    public ExampleData(int image, String continent) {
        this.image = image;
        this.continent = continent;
    }


    public int getImage() {
        return image;
    }

    public void setImage(int image) {
        this.image = image;
    }

    public String getContinent() {
        return continent;
    }

    public void setContinent(String continent) {
        this.continent = continent;
    }
}

MainActivity

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    String [] continent = {"北美洲","南美洲","亞洲","歐洲","非洲","大洋洲","南極洲"};
    int[] continent_image = {R.drawable.north_america,R.drawable.south_america,R.drawable.asia,R.drawable.europe
            ,R.drawable.africa,R.drawable.oceania,R.drawable.antarctica
    };

    RecyclerView mRecyclerView;
    ExampleAdapter mAdapter;
    RecyclerView.LayoutManager mLayoutManager;
    List<ExampleData> mExampleDataList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        createExampleList();
        buildRecyclerView();

    }

    private void buildRecyclerView() {
        mRecyclerView = findViewById(R.id.mRecyclerView);
        mRecyclerView.setHasFixedSize(true);
        mLayoutManager = new LinearLayoutManager(this);
        mAdapter = new ExampleAdapter(mExampleDataList);

        mRecyclerView.setLayoutManager(mLayoutManager);
        mRecyclerView.setAdapter(mAdapter);

    }

    private void createExampleList() {

        mExampleDataList = new ArrayList<>();
        for (int i=0;i<continent_image.length;i++){
            mExampleDataList.add(new ExampleData(continent_image[i],continent[i]));
        }
    }
}

在ExampleAdapter裡面的3個方法:

  • onCreateViewHolder 在這個示範裡我是連接剛剛寫的cardview的layout,然後回傳一個view。
  • onBindViewHolder 取得元件的控制
  • getItemCount 取得數量並且回傳一個int,通常是回傳陣列的長度。

為了連接所需要的元件,我們要再大的class裡面新增一個小class並且繼承RecycleView.ViewHolder,如下面程式碼所示。

  public static class ExampleViewHolder extends RecyclerView.ViewHolder {
        public ImageView imageView;
        public TextView textView;

        public ExampleViewHolder(@NonNull View itemView) {
            super(itemView);

            imageView = itemView.findViewById(R.id.continentimage);
            textView = itemView.findViewById(R.id.continent);
        }
    }

一樣附上圖片來源:
北美洲
南美洲
非洲
亞洲
南極洲
歐洲
大洋洲

最後在MainActivity裡面我一樣是將七大洲的地圖和名子顯示在畫面上,那今天就到此為止了,謝謝大家的觀看。


上一篇
[Day22]簡單的CardView
下一篇
[Day24]RecyclerView_2
系列文
Android開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言